<template>
    <div id="nursingRecord">
        <div id="addAndSearch">
            <div id="add">
                <el-button round type="primary" @click="addDialogVisible = true"
                >增加护理记录</el-button
                >
                <el-dialog
                        title="增加护理记录"
                        :visible.sync="addDialogVisible"
                        width="50%"
                        :before-close="handleClose"
                >
                    <div>
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="姓名">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="客户编号">
                                <el-input v-model="form.customer_id"></el-input>
                            </el-form-item>
                            <el-form-item label="护理项目">
                                <el-input v-model="form.project"></el-input>
                            </el-form-item>
                            <el-form-item label="护理时间">
                                <el-date-picker
                                        v-model="form.date"
                                        type="datetime"
                                        placeholder="选择日期"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="护理人员">
                                <el-input v-model="form.uname"></el-input>
                            </el-form-item>
                            <el-form-item label="护工编号">
                                <el-input v-model="form.user_id"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button
                    type="primary"
                    @click="
                addDialogVisible = false,
                onSubmit()"
            >立即创建</el-button
            >
          </span>
                </el-dialog>
            </div>
        </div>
        <div id="formDiv">
            <el-table
                    :data="RecordList"
                    border
                    style="width: 1235px"
            >
                <el-table-column fixed prop="id" label="序号" width="100">
                </el-table-column>
                <el-table-column prop="customerId" label="客户编号" width="120">
                </el-table-column>
                <el-table-column prop="name" label="客户姓名" width="120">
                </el-table-column>
                <el-table-column prop="project" label="护理项目" width="150">
                </el-table-column>
                <el-table-column prop="date" label="护理时间" width="340">
                </el-table-column>
                <el-table-column prop="uname" label="护理人员" width="154">
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                @click="
                centerDialogVisible = true,
                editButton(scope.row)
              "
                                size="small"
                        >编辑</el-button
                        >
                        <el-button @click="delClick(scope.row)" type="text" size="small"
                        >刪除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="editDialog">
            <el-dialog
                    title="修改用户资料"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center
            >
                <div>
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="客户姓名">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="客户编号">
                            <el-input v-model="form.customer_id"></el-input>
                        </el-form-item>
                        <el-form-item label="护理项目">
                            <el-input v-model="form.project"></el-input>
                        </el-form-item>
                        <el-form-item label="护理时间">
                            <el-date-picker
                                    v-model="form.date"
                                    type="datetime"
                                    placeholder="选择日期"
                                    >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="护理人员">
                            <el-input v-model="form.uname"></el-input>
                        </el-form-item>
                        <el-form-item label="护工编号">
                            <el-input v-model="form.user_id"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false,resetForm()">取 消</el-button>
          <el-button
                  type="primary"
                  @click="
              centerDialogVisible = false,
              editClick()
            "
          >确 定</el-button
          >
        </span>
            </el-dialog>
        </div>
        <el-row style="float: right;margin: 0">
            <label>当前为第{{this.page.nowpage}}页，共计{{this.page.totalpage}}页</label>
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" icon="el-icon-arrow-left" @click="decrease_page()">上一页</el-button>
                    <el-button type="primary" @click="increase_page()">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    <el-input type="primary" placeholder="请输入页码" style="max-width: 120px"
                              v-model="page.page_input"
                    ></el-input>
                    <el-button type="primary" @click="change_page()">Go!</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
    import qs from 'qs'
    const axios = require("axios");
    export default {
        mounted() {
            this.getRecord("1");
        },
        methods: {
            onSubmit() {
                //增加用戶按鈕
                console.log(this.form);
                // if (this.form.name == "" || this.form.power == "" || this.form.pwd == "" || this.form.employ_number == "" || this.form.age == "" || this.form.salary == "" || this.form.sex == "" || this.form.telephone == "") {
                //     alert("请输入完整信息");
                // } else {
                //     this.addUser();
                // }
                this.addRecord();
            },
            searchByName(search) {
                if (search == "") {
                    this.getRecord(1);
                    this.page.nowpage = 1;
                } else {
                    axios({
                        method: 'post',
                        url: '/api/nursingrecord_page/getRecordByName',
                        data: qs.stringify({'name':search,'page':this.$data.page.nowpage}),
                    })
                        .then(
                            (res) => {
                                console.log(res);
                                this.RecordList = res.data.data.record_list;
                                this.nowpage = 1;
                            },
                            (res) => {
                            }
                        );
                }

            },
            delClick(row) {
                console.log(row);
                this.delRecord(row.id);
            },
            editButton(row) {
                this.form.name = row.name;
                this.form.date=row.date;
                this.form.project=row.project;
                this.form.uname=row.uname;
                this.form.id=row.id;
                this.form.customer_id=row.customerId;
            },
            onSearch() {
                console.log(this.formInline.search);
                console.log(this.$data.page.nowpage);
                    this.searchByName(this.formInline.search)
            },
            resetForm() {
                this.form.name ="";
                this.form.time="";
                this.form.content="";
                this.form.date="";
                this.form.project="";
                this.form.uname="";
                this.form.id="";
            },
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then((_) => {
                        done();
                    })
                    .catch((_) => {
                    });
            },
            handleCurrentChange(val) {
                /*console.log(val);*/
                this.getRecord(val);
                this.nowpage = val;
            },
            getRecord(page) {
                axios({
                    method: 'post',
                    url: '/api/nursingrecord_page/getRecord',
                    data: qs.stringify({'page': page}),
                }).then(
                    (res) => {
                        this.RecordList = res.data.data.nursingRecordEncapsulation2s;
                        this.page.totalpage = res.data.data.totalPage;
                    },
                    (res) => {
                    }
                );
            },
            addRecord() {
                const form = this.$data.form;
                axios({
                    method: 'post',
                    url: '/api/nursingrecord_page/addRecord',
                    data: qs.stringify(this.$data.form),
                })
                    .then(
                        (res) => {
                            console.log(res);
                            if(res.data==-1){
                                alert('请输入有效的客户和编号')
                            }
                            if(res.data==-2){
                                alert("请输入有效的员工和编号");
                            }
                            if(res.data==-3){
                                alert("没有该护理项目")
                            }
                            this.page.totalpage=res.data;
                            this.getRecord(this.page.nowpage);
                            this.resetForm();
                        },
                        (res) => {
                        }
                    );
            },
            delRecord(id) {
                axios({
                    method: 'post',
                    url: '/api/nursingrecord_page/delRecord',
                    data: qs.stringify({"id":id}),
                })
                    .then(
                        (res) => {
                            console.log(res.data);
                            this.getRecord(this.page.nowpage);
                        },
                        (res) => {
                        }
                    );
            },
            editClick() {
                const form = this.$data.form
                axios({
                    method: 'post',
                    url: '/api/nursingrecord_page/editRecord',
                    data: qs.stringify(this.$data.form),
                })
                    .then(
                        (res) => {
                            console.log(res);
                            if(res.data==-1){
                                alert('请输入有效的客户和编号')
                            }
                            if(res.data==-2){
                                alert("请输入有效的员工和编号");
                            }
                            if(res.data==-3){
                                alert("没有该护理项目")
                            }
                                this.getRecord(this.page.nowpage);
                                this.resetForm();
                        },
                        (res) => {
                        }
                    );
            },
            increase_page() {
                if(this.page.nowpage<this.page.totalpage) {
                    this.$data.page.nowpage++;
                    this.getRecord(this.page.nowpage);
                }
            },
            decrease_page() {
                if (this.$data.page.nowpage > 1) {
                    this.$data.page.nowpage--;
                }
                this.getRecord(this.page.nowpage)
            },
            change_page() {
                let num = parseInt(this.$data.page_input);
                if (isNaN(num)) {
                    alert("请输入正确的数字！");
                    this.$data.page.page_input = '';
                } else if (num <= 0) {
                    alert("请输入正整数！");
                    this.$data.page.page_input = '';
                } else {
                    this.$data.page.current_page = num;
                    this.getRecord(this.page.page_input);
                }
            },
        },
        data() {
            return {
                RecordList: [],
                page: {
                    nowpage:1,
                    totalpage:1,
                    page_input:"",
                },
                addDialogVisible: false, //add彈出框屬性
                centerDialogVisible: false, //
                formInline: {
                    search: "",
                },
                editId: "",
                options: [
                    {
                        value: "id",
                        label: "用户编号",
                    },
                    {
                        value: "name",
                        label: "用户名",
                    },
                ],
                value:'',
                form: {
                    id:"",
                    name: "",
                    customer_id:"",
                    project:"",
                    date:"",
                    uname:"",
                    user_id:'',
                },
            };
        },
    };
</script>

<style>

    #nursingRecord {
        width: 100%;
        height: 100%;
    }
    #nursingRecord #formDiv{
        margin-left: 50px;
        margin-right: 50px;
    }
    #nursingRecord #addAndSearch {
        padding: 20px;
        width: 100%;
        height: 50px;
    }
    #nursingRecord #addAndSearch .el-input {
        width: 200px;
    }
    #nursingRecord #addAndSearch #add {
        float:left;
    }
    #nursingRecord #addAndSearch #search {
        float: right;
        margin-right: 60px;
    }
    #nursingRecord #addAndSearch #search .el-input {
        width: 120px;
    }
    #nursingRecord #page {
        bottom: 0;
        left:50%;
        position: absolute;
    }
    /*#nursingRecord #formDiv .el-table th,#nursingRecord #formDiv .el-table tr,#nursingRecord #formDiv .el-table__empty-block,#nursingRecord .el-table__row td*/
    /*{*/
    /*    border: 1px solid #CBCBCB;*/
    /*    background-color: #EEEEEE;*/
    /*}*/
</style>

